<template>
  <div>
    <el-select ref="selectRef" v-model="param.selectCity" :disabled ="!props.refResh" clearable filterable remote reserve-keyword :remote-method="getYards"
      @change="getYardData" :loading="param.loading" style="width:100%" :placeholder="placeholder">
      <el-option v-for="item in param.yardOptions" :key="item.value" :label="item.label" :value="item" />
    </el-select>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, watch, ref } from 'vue';
import { getYardList } from '@/api/boxManage/yard'; // 引入城市接口


const props = defineProps({  // 默认情况下，一个组件上的 v - model 会把 value 用作 prop 且把 input 用作 event
  placeholder: {
    type: String,
    default: '请输入'
  },
  selectName: { //keyName 查询堆场入参
    type: String,
    default: 'yardCode'
  },
  yardName: {
    type: String,
    default: ''
  },  
  boxEastYardId: {
    type: Number,
    default: 0
  },
  refResh: {
    type: Boolean,
    default: true
  },
  needInfo: {
    type: Boolean,
    default: false
  },
  cityList: {
    type: Array,
    default: () => {
      return []
    }
  },
  other: {
    type: String,
    default: ''
  }
})
const selectRef = ref()

watch(() => props.cityList, (list: any) => {
  if (list && list.length > 0) {
    param.yardOptions = list
    param.selectCity = list[0].value
  }
});
watch(() => props.yardName, (val: any) => {
  param.selectCity = val
  console.log(param.selectCity)
  if(!props.refResh){
    getYards(val)
  }
});

const param = reactive({
  loading: false,
  yardOptions: [],
  selectCity: props.value
})

const getYards = (query: string) => {
  if (query) {
    param.loading = true
    let data = {}
    if (props.selectName == 'yardCode') {
      data.yardNum = query
    }
    if (props.selectName == 'yardName') {
      data.yardName = query
    }
    if (props.selectName == 'tel') {
      data.tel = query
    }
    getYardList(data).then((res: any) => {
      param.loading = false
      param.yardOptions = res.data.map((item: any) => {
        if (props.selectName == 'tel') {
          return { 
            value: item.id, 
            label: item.tel, 
            tel: item.tel, 
            yardAddress: item.yardAddress, 
            cityId:item.cityId,
            contacts: item.contacts, 
            workTime: item.workTime, 
            yardContacts: item.yardContacts,
            priceList: item.priceList  
          }
        } else {
          return { 
            value: item.id, 
            label: item.yardName, 
            tel: item.tel, 
            yardAddress: item.yardAddress,
            cityId:item.cityId,
            contacts: item.contacts, 
            workTime: item.workTime, 
            yardContacts: item.yardContacts,
            priceList: item.priceList   
          }
        }
      })
      if (props.other == 'addOpt') {
        let zaiTu = { 
          value: "1",
          label: "在途", 
          tel: "zaitu", 
          priceList:[{"aa":11}] 
        }
        param.yardOptions.push(zaiTu)
      }
      //重开回调
      if(!props.refResh){
        let info = {}
        param.yardOptions.map((item: any) => {
          if (item.value === props.boxEastYardId) {
            info = { 
              yardName: item.label, 
              id: item.value, 
              tel: item.tel, 
             cityId:item.cityId,
              yardAddress: item.yardAddress, 
              contacts: item.contacts, 
              workTime: item.workTime, 
              yardContacts: item.yardContacts,
              priceList: item.priceList 
            }
          }
        })
        emit('yardId', props.boxEastYardId, info)
      }
    }).catch((err: any) => {
      console.log(err)
      param.loading = false
    })
  }
}

const emit = defineEmits(['yardId'])
const getYardData = (select: any) => {
  if (!select || !select.value) {
    emit('yardId', null, {})
    return
  }
  if (props.needInfo) {
    let info = {}
    param.yardOptions.map((item: any) => {
      if (item.value === select.value) {
        info = { 
          yardName: item.label, 
          id: item.value, 
          tel: item.tel, 
          yardAddress: item.yardAddress, 
          cityId:item.cityId,
          contacts: item.contacts, 
          workTime: item.workTime, 
          yardContacts: item.yardContacts,
          priceList: item.priceList
        }
      }
    })
    emit('yardId', select.value, info)
  } else {
    emit('yardId', select.value)
  }
}


const forceClear =() =>{
  param.selectCity = ''
  // selectRef.value.handleClear();
}

defineExpose({
  forceClear
})
</script>
<style lang="scss" scoped></style>